<template>
    <div class="container-box">
        <div class="charts-container">
            <div class="charts-top">昨日核心数据</div>
            <el-row class="yesterday" :gutter="8">
                <el-col :span="8">
                    <div class="charts-box">
                        <div class="charts-record">
                            <i class="icon-1"></i>
                            <span>累计用户数</span>
                            <div class="number" v-html="formatter(record.regist_user_num_total.num)"></div>
                            <div class="compare" v-html="record.regist_user_num_total.rate"></div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="charts-box">
                        <div class="charts-record">
                            <i class="icon-2"></i>
                            <span>聊天消息数</span>
                            <div class="number" v-html="formatter(record.up_msg_num.num)"></div>
                            <div class="compare" v-html="record.up_msg_num.rate"></div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="charts-box">
                        <div class="charts-record">
                            <i class="icon-3"></i>
                            <span>登录用户数</span>
                            <div class="number" v-html="formatter(record.active_user_num.num)"></div>
                            <div class="compare" v-html="record.active_user_num.rate"></div>
                        </div>
                    </div>
                </el-col>
                <!-- <el-col :span="6">
                    <div class="charts-box">
                        <div class="charts-record">
                            <i class="icon-4"></i>
                            <span>新增用户数</span>
                            <div class="number" v-html="formatter(record.regist_user_num_one_day.num)"></div>
                            <div class="compare" v-html="record.regist_user_num_one_day.rate"></div>
                        </div>
                    </div>
                </el-col> -->
            </el-row>
            <div class="charts-top">
                数据趋势
                <div class="charts-date-type">
                    <date-picker @getData="getData" :dateDataType="dateDataType" :date_interval="date_interval" :date_min="dateMin" :now_day="false" size="small"></date-picker>
                </div>
            </div>
            <el-row :gutter="8">
                <el-col :span="12">
                    <div class="charts-box">
                        <div class="charts-header">
                            <div class="charts-title">用户统计</div>
                        </div>
                        <el-radio-group 
                            class="charts-radio-group"
                            v-model="dataType[0]" 
                            size="medium" 
                            @change="getActiveData">
                            <el-radio-button :label="item.value" v-for="(item, index) in dataTypeArr[0]" :key="index">{{item.label}}</el-radio-button>
                        </el-radio-group>
                        <div class="charts-content">
                            <charts :dataArr="dataArr" :showParticleSize="showParticleSize" container="c1" :hasType="false"></charts>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="charts-box">
                        <div class="charts-header">
                            <div class="charts-title">客户聊天</div>
                        </div>
                        <el-radio-group 
                            class="charts-radio-group charts-chat"
                            v-model="dataType[1]" 
                            size="medium" 
                            @change="getChatData">
                            <el-radio-button :label="item.value" v-for="(item, index) in dataTypeArr[1]" :key="index">{{item.label}}</el-radio-button>
                        </el-radio-group>
                        <div class="charts-content">
                            <charts :dataArr="dataArr2" :showParticleSize="showParticleSize" container="c2" :hasType="false"></charts>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
import datePicker from '../datePicker.vue';
import charts from '../charts.vue';
import { formatterNumber, dateFormatter } from '@/common/js/util.js'
export default {
    data() {
        return {
            record: {
                "active_user_num": { // 活跃用户
                    "num": 0,        // 数值
                    "rate": '--'        // 比率 已经*100
                },
                "regist_user_num_one_day": { // 新增注册
                    "num": 0,
                    "rate": '--'
                },
                "regist_user_num_total": { // 累计注册
                    "num": 0,
                    "rate": '--'
                },
                "up_msg_num": { // 发消息数
                    "num": 0,
                    "rate": '--'
                }
            },
            dataList: [
                {
                    active_user_num: [],         // 活跃用户数
                    regist_user_num_one_day: [], // 新增注册人数
                    regist_user_num_total: [],   // 累计注册人数
                    login_times: [],             // 登陆次数
                    login_user_num: [],          // 登陆人数
                    max_online_num: []           // 最高在线人数
                },
                {
                    up_msg_num: [],              // 聊天消息数
                    send_msg_user_num: [],       // 发消息人数
                    ave: [],                     // 人均发消息数
                }
            ],
            dataTypeArr: [
                [
                    //{label: '活跃用户数', value: 'active_user_num', valueSuffix: ' 人'},
                    {label: '新增用户数', value: 'regist_user_num_one_day', valueSuffix: ' 人'},
                    {label: '累计用户数', value: 'regist_user_num_total', valueSuffix: ' 人'},
                    {label: '登录次数', value: 'login_times', valueSuffix: ' 次'},
                    {label: '登录用户数', value: 'login_user_num', valueSuffix: ' 人'},
                    // {label: '最高在线人数', value: 'max_online_num', valueSuffix: ' 人'}
                ],
                [
                    {label: '聊天消息数', value: 'up_msg_num', valueSuffix: ' 条'},
                    {label: '发消息人数', value: 'send_msg_user_num', valueSuffix: ' 人'},
                    {label: '人均发消息数', value: 'ave', valueSuffix: ' 条'}
                ]
            ],
            dataType: ['regist_user_num_one_day', 'up_msg_num'],
            showParticleSize: false,   // 粒度控件
            searchContent: {
                data_type: 4,  // 类型，默认访问次数
            },
            dataArr: {
                labelFormat: 'MM-DD',
                series:  []
            },
            dataArr2: {
                labelFormat: 'MM-DD',
                series:  []
            },
            dateDataType: null,
            date_interval: [],
            admin_is_super: 0,
            admin_id: 0,
            dateMin: 0
        }
    },
    components: { datePicker, charts },
    created() {
        const date = new Date()
        date.setDate(date.getDate()-31) // 不含当天
        this.dateMin = dateFormatter("YYYY-MM-DD", date.getTime())

        this.admin_is_super = this.$store.getters["user_info"].admin_is_super
        this.admin_id = this.$store.getters["user_info"].admin_id
        const data_type = this.$route.params.data_type;
        if(data_type) {
            this.searchContent.data_type = data_type;
            this.dateInterval = this.$route.params.dateInterval;
        }
        this.getYesterdayData()
    },
    methods: {
        animation(val, key) {
            val = parseInt(val)
            const value = Math.ceil(parseInt(val) / 120) // 计算单次需要增加的数值
            let timer = setInterval(() => {
                if (this.record[key].num + value < val) {
                    this.record[key].num = this.record[key].num + value
                } else {
                    this.record[key].num = val
                    clearInterval(timer)
                    timer = null
                }
            }, 2)
        },
        formatter(num) {
            return formatterNumber(num, 10000, 2, true, true)
        },
        getYesterdayData() {
            this.$http.get('/admin/yt_car/index.php?act=statistic&op=imDailyStatistics').
            then(res => {
                const data = res.data || {}
                Object.entries(data).forEach(item => {
                    if (item[1].rate > 0) {
                        item[1].rate = `较前日 <font color="#FF6868"><svg t="1637629290734" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2546" width="200" height="200"><path d="M929.408 202.752l-205.269333 24.661333a8.234667 8.234667 0 0 0-4.864 13.994667l61.141333 60.928-232.96 232.32-104.874667-104.533333a16.469333 16.469333 0 0 0-23.296 0l-331.52 330.752a8.234667 8.234667 0 0 0 0 11.605333l46.336 46.464a8.277333 8.277333 0 0 0 11.648 0l285.184-284.288 104.789334 104.533333c6.485333 6.357333 16.896 6.357333 23.296 0l279.722666-278.784 61.098667 60.970667c4.821333 4.821333 13.226667 1.962667 14.037333-4.821333l24.746667-204.8a8.106667 8.106667 0 0 0-9.216-9.002667z" p-id="2547"></path></svg> ${Math.abs(item[1].rate)}%</font>`
                    } else if (item[1].rate < 0) {
                        item[1].rate = `较前日 <font color="#29E242"><svg t="1637629511142" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4912" width="200" height="200"><path d="M938.581333 812.117333l-24.746666-204.714666a8.277333 8.277333 0 0 0-13.994667-4.821334l-61.098667 61.013334-279.637333-278.698667a16.597333 16.597333 0 0 0-23.253333 0l-104.96 104.533333-285.141334-284.373333a8.277333 8.277333 0 0 0-11.648 0L87.722667 251.52a8.234667 8.234667 0 0 0 0 11.605333l331.52 330.794667c6.4 6.485333 16.938667 6.485333 23.338666 0l104.917334-104.533333 232.96 232.277333-61.098667 60.970667a8.234667 8.234667 0 0 0 4.864 13.952l205.312 24.661333a8.106667 8.106667 0 0 0 9.045333-9.130667z" p-id="4913"></path></svg> ${Math.abs(item[1].rate)}%</font>`
                    } else {
                        item[1].rate = `较前日 <font color="#79BCFF">-- 持平</font>`
                    }
                    this.record[item[0]].rate = item[1].rate
                    this.animation(item[1].num, item[0])
                })
            }).catch(error => {
                error && this.$message.error(`${error}`)
            })
        },
        getData(dateInterval = null) {
            this.dateInterval = dateInterval
            this.getActiveData()
            this.getChatData()
        },
        // 用户活跃
        getActiveData(typeid = null) {
            const index = 0
            const type1 = this.getType(index)
            if (!typeid) {
                const datas = {
                    begin_date: this.dateInterval[0],
                    end_date: this.dateInterval[1]
                }
                this.$http.get('/admin/yt_car/index.php?act=statistic&op=imActiveTrend', {params: datas}).
                then(res => {
                    const data = res.data || {}
                    this.dataList[index] = { ...this.dataList[index], ...data}
                    this.dataArr = {
                        ...this.dataArr,
                        tooltip: {
                            valueSuffix: type1.valueSuffix
                        },
                        series: [{
                            name: type1.label,
                            color: '#1890FF',
		                    data: res.data[type1.value] || []
                        }]
                    }
                })
            } else {
                this.dataArr['tooltip'] = { valueSuffix: type1.valueSuffix }
                this.dataArr.series = [{
                    name: type1.label,
                    color: '#1890FF',
		            data: this.dataList[index][typeid] || []
                }]
            }
        },
        // 客户聊天
        getChatData(typeid = null) {
            const index = 1
            const type2 = this.getType(index)
            if (!typeid) {
                const datas = {
                    begin_date: this.dateInterval[0],
                    end_date: this.dateInterval[1]
                }
                this.$http.get('/admin/yt_car/index.php?act=statistic&op=imChatStatistics', {params: datas}).
                then(res => {
                    const data = res.data || {}
                    this.dataList[index] = { ...this.dataList[index], ...data}
                    this.dataArr2 = {
                        ...this.dataArr2,
                        tooltip: {
                            valueSuffix: type2.valueSuffix
                        },
                        series: [{
                            name: type2.label,
                            color: '#FF6868',
		                    data: res.data[type2.value] || []
                        }]
                    }
                })
            } else {
                this.dataArr2['tooltip'] = { valueSuffix: type2.valueSuffix }
                this.dataArr2.series = [{
                    name: type2.label,
                    color: '#FF6868',
		            data: this.dataList[index][typeid] || []
                }]
            }
        },
        getType(index) {
            return this.dataTypeArr[index].find(item => {
                if (item.value == this.dataType[index]) return item
            });
        }
    }
}
</script>
<style scoped lang="scss">
    @import url('~@/common/scss/charts-public.scss');
    .container-box {
        width: 100%;
        height: calc(100% - 29px);
        box-sizing: border-box;
        padding: 0;
        position: relative;
        /deep/.el-radio-button__inner {
            font-size: 14px;
        }
        .charts-top { 
            margin: 16px 0 0 4px;
            font-size: 18px;
            font-weight: bold;
            position: relative;
        }
        .charts-date-type {
            position: absolute;
            right: 4px;
            top: -4px;
            z-index: 99;
        }
        .charts-container {
            box-shadow: none;
            width: calc(100% + 10px);
            height: 100%;
            overflow: hidden;
            margin: 0 -5px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            .el-row {
                flex-grow: 1;
                width: 100%;
                >.el-col {
                    height: 100%;
                    &:last-child { 
                        padding-right: 0!important;
                        .charts-box { margin-right: 2px; }
                    }
                    .charts-box { height: calc(100% - 30px); }
                }
            }
            .yesterday {
                flex-grow: inherit;
                height: 178px;
                >.el-col .charts-box { height: calc(100% - 15px); }
                .charts-record {
                    padding: 20px;
                    position: relative;
                    span { 
                        font-size: 18px;
                    }
                    /deep/.number {
                        // color: #409EFF;
                        margin-top: 14px;
                        font-size: 4.8vh;
                        line-height: 1;
                        font-family: 'DIN Condensed Bold';
                        font {
                            font-size: 16px;
                            font-weight: 0;
                            font-family: '微软雅黑';
                            &:first-child {
                                margin-left: 4px;
                            }
                        }
                    }
                    .compare {
                        margin-top: 10px;
                        font-size: 16px;
                        color: #666;
                    }
                    i {
                        width: 62px;
                        height: 62px;
                        position: absolute;
                        right: 20px;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                        background-image:url(~@/assets/images/im-1.png);
                        background-size: 100%;
                        background-position: center;
                        background-repeat: no-repeat;
                        &.icon-2 { background-image:url(~@/assets/images/im-2.png); }
                        &.icon-3 { background-image:url(~@/assets/images/im-3.png); }
                        &.icon-4 { background-image:url(~@/assets/images/im-4.png); }
                    }
                    
                }
            }
        }
        .charts-box {
            background: #fff;
            box-shadow: 0px 0px 10px #ddd;
            box-sizing: border-box;
            margin: 15px 5px 0;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            .charts-header {
                height: 48px;
                padding: 0 18px 4px;
                border: none;
                position: relative;
                .charts-title { 
                    font-size: 18px;
                    margin-top: 10px;
                }
            }
            /deep/ .charts-content  {
                flex-grow: 1;
                padding: 0 10px;
                .chart-content {
                    padding-bottom: 8px;
                }
            }
        }
    }
    .charts-radio-group {
        margin: 0 14px;
        label {
            margin: 4px 4px;
            /deep/.el-radio-button__inner {
                border-radius: 4px;
                border-left: 1px solid #DCDFE6;
            }
            /deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
                border-color: #409EFF;
                box-shadow: none
            }
        }
        &.charts-chat label /deep/ {
            .el-radio-button__inner:hover { color: #FF6868; }
            .el-radio-button__orig-radio:checked + .el-radio-button__inner {
                background-color: #FF6868;
                border-color: #FF6868;
                box-shadow: none;
                &:hover { color: #fff; }
            }
        }
        /deep/.el-radio-button__inner {
            font-size: 15px;
        }
    }
</style>